<template>
    <div class="wrapper">
        <div style="display: flex;justify-content: center;background: #FFFFFF;">
            <el-menu :default-active="activeIndex" active-text-color="#ff7b33" :text-color="'#333333'"
                class="el-menu-demo" mode="horizontal">
                <el-menu-item index="1">首页</el-menu-item>
                <!-- <el-submenu index="2">
                    <template slot="title">全部演出</template>
                    <el-menu-item index="2-1">流行</el-menu-item>
                    <el-menu-item index="2-2">直播</el-menu-item>
                    <el-menu-item index="2-3">音乐节</el-menu-item>
                    <el-menu-item index="2-4">其他</el-menu-item>
                </el-submenu> -->
                <!-- <el-menu-item index="3"> <el-input placeholder="搜索明星，演出，场馆" prefix-icon="el-icon-search"
                        v-model="title" /></el-menu-item>
                <el-menu-item index="4">体育赛事</el-menu-item> -->
                 <el-menu-item index="5" @click="myOrderList">我的订单</el-menu-item>
            </el-menu>
        </div>
        <div style="display: flex;justify-content: space-between;padding: 0 100px;">
            <div style="width: 65%;">
                <div class="allType">
                    <!-- <div class="typeLine">
                        <div class="typef">分类:</div>
                        <div class="typeItems">
                            <div class="typeBtn typeAct">演唱会</div>
                            <div class="typeBtn">音乐会</div>
                            <div class="typeBtn">话剧歌剧</div>
                            <div class="typeBtn">舞蹈芭蕾</div>
                            <div class="typeBtn">曲苑杂坛</div>
                            <div class="typeBtn">体育赛事</div>
                            <div class="typeBtn">度假休闲</div>
                        </div>

                    </div>
                    <div class="typeLine">
                        <div class="typef">子类:</div>
                        <div class="typeItems">
                            <div class="typeBtn typeAct">全部</div>
                            <div class="typeBtn">流行</div>
                            <div class="typeBtn">LiveHouse</div>
                            <div class="typeBtn">摇滚</div>
                            <div class="typeBtn">民族</div>
                            <div class="typeBtn">音乐节</div>
                            <div class="typeBtn">其他</div>
                        </div>

                    </div>
                    <div class="typeLine">
                        <div class="typef">时间:</div>
                        <div class="typeItems">
                            <div class="typeBtn typeAct">全部</div>
                            <div class="typeBtn">明天</div>
                            <div class="typeBtn">最近</div>
                            <div class="typeBtn">三天</div>
                            <div class="typeBtn">本周末</div>
                            <div class="typeBtn">下周末</div>
                            <div class="typeBtn">最近30天</div>
                        </div>

                    </div> -->
                </div>
                <div class="allShowBox">
                    <div class="typeLine" style="border-bottom:1px solid #e5e5e5 ;">
                        <div class="typef">排序:</div>
                        <div class="typeItems" style="width: 80%;">
                            <div class="typeBtn typeAct">默认</div>
                            <div class="typeBtn">按热门</div>
                            <div class="typeBtn">按时间</div>
                        </div>
                        <div class="typef">共 384 个项目</div>

                    </div>
                    <div class="List">
                        <div class="itemBox" v-for="item in tableData" :key="item.id">
                            <img class="imgClass" src="@/assets/haib.png" alt="">
                            <div class="pickBox">
                                <div class="picTitle">{{ item.title }}</div>
                                <div class="picDate">{{ item.changci }}</div>
                                <div class="picDate">{{ item.changguan }}</div>

                            </div>
                            <div class="picBom">
                                <div class="picHot">{{ '￥ ' + item.price }}<span style="font-size: 10px;color: gry;">起
                                    </span>
                                </div>
                                <div class="buyBtn" @click="gotobuy(item.id)">立即购买</div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div style="width: 34%;height: 500px;">
                <div class="List">
                    <div class="itemBox" v-for="item in tableData" :key="item.id">
                        <img class="imgClass" src="@/assets/haib.png" alt="">
                        <div class="pickBox">
                            <div class="picTitle">{{ item.title }}</div>
                            <div class="picDate">{{ item.changci }}</div>
                            <div class="picDate">{{ item.changguan }}</div>
                            <div class="picDate">
                                <div>{{ '￥ ' + item.price }}<span style="font-size: 10px;color: gry;">起
                                    </span>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
        
        <div style="padding: 20px 0;"><el-pagination @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[2, 5, 10, 20]"
                :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination></div>
        <el-dialog title="购票信息填写" :visible.sync="dialogFormVisible" width="30%">
            <el-form label-width="100px" size="small">
                <el-form-item label="用户名">
                    <el-input v-model="pass.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="pass.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="身份证">
                    <el-input v-model="pass.idcard" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="passwordBack">确 认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
    name: "buyTickets",
    data() {
        return {
            activeIndex: '1',
            value1: 4,
            title: '',
            activeName: '1',
            tableData: [],
            total: 0,
            pageNum: 1,
            pageSize: 10,
            form: {},
            dialogFormVisible: false,
            pass: {},
        }
    },
    created() {
        this.load()
    },
    methods: {
        myOrderList(){
 this.$router.push('/myOrderList')
        },
        load() {
            this.request.get("/vocal/page", {
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    title: this.title,
                }
            }).then(res => {
                this.tableData = res.data.records
                this.total = res.data.total
                // console.log(this.tableData);
            })
        },

        handleSizeChange(pageSize) {
            console.log(pageSize)
            this.pageSize = pageSize
            this.load()
        },
        handleCurrentChange(pageNum) {
            console.log(pageNum)
            this.pageNum = pageNum
            this.load()
        },
        gotobuy(id) {
            this.$router.push('/IsbuyTicketsInfo?id=' + id)
        },
        info(id) {
            this.request.get("/vocal/" + id).then(res => {
                this.form = res.data
                // console.log(this.form);
            })
        },
        buyIt() {
            this.dialogFormVisible = true
            console.log(this.form);vocal
        },
        passwordBack() {
            this.$confirm('请携带身份证检票', '提示', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确定',
            })
                .then(() => {
                    this.dialogFormVisible = false
                })
                .catch(action => {
                    this.dialogFormVisible = false
                });
            // this.request.put("/vocal/submit", JSON.stringify(this.form)).then(res => {
            // this.form = res.data
            // console.log(res);
            // })
        }
    }
}
</script>

<style scoped>
.infoTime {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-bottom: 5px;
}

.infoImg {

    width: 20px;
    height: 20px;
}

.picInfo {
    margin-top: 10px;
    background: #fff;
    width: 100%;
    padding: 10px;
    border-radius: 25px 25px 0 0;
}




.picHot {
    color: #f00;
    font-size: 24px;
}

.buyBtn {
    background: #ff7b33;
    border-radius: 10px;
    width: 117px;
    height: 41px;
    font-size: 17px;
    line-height: 41px;
    color: #fff;
    text-align: center;
    margin-top: 30px;
    cursor: pointer;
}

.picBom {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.picTitle {
    height: 40px;
    font-size: 19px;
    font-weight: 600;
    color: #242424;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.picDate {
    height: 18px;
    margin-top: 18px;
    color: #939393;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.imgClass {
    width: 144px;
    height: 193px;
    border-radius: 25px;
}

.pickBox {
    width: 100%;
    margin-left: 16px;
}

.itemBox {
    background: #fff;
    padding: 10px;
    /* border-radius: 25px; */
    display: flex;
    /* justify-content: center; */
    margin-top: 10px;
    border-bottom: 1px solid #e5e5e5;
}

.List {
    padding: 0 10px;
    width: 100%;
    /* height: 590px; */
    overflow: auto;
    border-radius: 0 0 25px 25px;
    /* 当内容超出时显示滚动条 */
    /* overflow: hidden; */
}

.List::-webkit-scrollbar {

    display: none;

}

.phoneContainer {
    min-width: 355px;
    height: 758px;
    background-color: black;
    border-radius: 20px;
    position: relative;
    margin-right: 100px;
}

.screen {
    width: 350px;
    height: 750px;
    background: rgb(255, 196, 196);
    background: linear-gradient(167deg, rgba(255, 196, 196, 1) 10%, rgba(45, 138, 253, 1) 20%, rgba(34, 193, 195, 1) 48%, rgba(211, 216, 255, 1) 69%, rgba(0, 164, 24, 1) 88%);
    border-radius: 20px;
    position: absolute;
    top: 4px;
    bottom: 2px;
    right: 2px;
    left: 2px;
    box-sizing: border-box;
}

.camera {
    width: 80px;
    background-color: black;
    position: absolute;
    height: 20px;
    top: 4%;
    right: 50%;
    transform: translate(50%, -50%);
    border-radius: 25px;
    transition: 0.3s;
    animation-name: callTransition;
    animation-duration: 1.9s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

@keyframes callTransition {
    15% {
        width: 40px;
    }

    95% {
        width: 95px;
        background-color: darkblue;
    }
}

.camera:before {
    content: "";
    width: 15px;
    height: 15px;
    background-color: rgb(19, 19, 51);
    position: absolute;
    border-radius: 50%;
    left: 5px;
    top: 2px;
}

.camera:after {
    content: "";
    width: 5px;
    height: 5px;
    /* background-color: lightgreen; */
    position: absolute;
    border-radius: 50%;
    right: 5px;
    top: 6px;
}

.appsContainer {
    /* padding: 0 10px; */
    margin-top: 50px;
    height: 700px;
    border-radius: 0 0 25px 25px;
    background: #f0f0f0;
}

.wrapper {
    /* padding: 50px 100px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #EFF3F5;
}

.wrapper2 {
    display: flex;
    justify-content: left;
}

.allType {
    /* width: 50%; */
    margin-top: 20px;
    background: #FFFFFF;
    padding: 20px;
}

.typeLine {
    display: flex;
    justify-content: flex-start;
    padding: 8px 0;
}

.typeItems {
    display: flex;
}

.typef {
    font-size: 14px;
    padding: 0px 8px;
    color: #858586;
}

.typeBtn {
    border-radius: 25px;
    padding: 0px 8px;
    cursor: pointer;
    font-size: 14px;
    color: #2d3e4f;
    line-height: 24px;

}

.typeAct {
    background: #ff7b33;
    color: #fff;
}

.typeBtn:hover {
    background: #ff7b33;
    color: #fff;


}

.allShowBox {
    margin-top: 20px;
    background: #FFFFFF;
}

/* 详情布局 */
.topbgBox {
    height: 296px;
    margin-top: 30px;
    background-image: url('../assets/xiangqing-bg.jpg');
    background-size: cover;
    /* 背景图片覆盖整个容器 */
    background-position: center;
    /* 背景图片居中 */
    background-repeat: no-repeat;
    /* 背景图片不重复 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.itemBoxinfoss {
    /* background: #fff; */
    /* padding: 10px; */
    /* border-radius: 25px; */
    display: flex;
    /* justify-content: center; */
    /* border-bottom: 1px solid #e5e5e5; */
}

.wantLook {
    /* height: 42px; */
    padding: 9px 0;
    margin-bottom: 20px;
    border-radius: 3px;
    box-shadow: 0 0 0 3px rgba(128, 128, 128, .4);
    background: rgba(0, 0, 0, .5);
    display: flex;
    justify-content: space-between;
}

.wantLookItem {
    float: left;
    min-width: 144px;
    overflow: hidden;
    height: 100%;
    line-height: 20px;
    font-size: 12px;
    color: #D6D6D6;
    text-align: center;
    border-right: 1px solid #161e46;
}

.promiseBox {
    min-width: 288px;
    height: 100px;
    padding: 14px;
    box-shadow: 0 0 0 3px rgba(128, 128, 128, .4);
    border-radius: 3px;
    background: rgba(0, 0, 0, .5);
}

.promiseItem {
    margin-bottom: 15px;
    color: #3DA6FF;
    font-size: 12px;
    text-align: center;
    /* padding-left: 50px; */
}

.allType2 {
    /* width: 50%; */
    margin-top: 20px;
    background: #FFFFFF;
    padding: 20px;
}

.typeLine2 {
    display: flex;
    justify-content: flex-start;
    padding: 8px 0;
}

.typeItems2 {
    display: flex;
}

.typef2 {
    font-size: 14px;
    padding: 0px 8px;
    color: #858586;
    line-height: 42px;
}

.typeBtn2 {
    height: 42px;
    border-radius: 10px;
    padding: 0px 8px;
    cursor: pointer;
    font-size: 14px;
    color: #2d3e4f;
    line-height: 42px;
    text-align: center;

}

.typeAct2 {
    background: #ff5219;
    color: #fff;
}

.typeBtn2:hover {
    background: #ff5219;
    color: #fff;


}

.justBuyIt {
    width: 116px;
    height: 39px;
    line-height: 39px;
    text-align: center;
    font-size: 15px;
    color: #fff;
    background-image: -webkit-linear-gradient(to bottom, #ffcc00, #ff9a1d);
    background-image: linear-gradient(to bottom, #ffcc00, #ff9a1d);
    border-radius: 24px;
    cursor: pointer;
}

.infotipsbox {
    background-color: #fff;
    padding: 0 20px;
    border: 1px solid #e0e7eb;
    border-radius: 3px;
    margin-top: 20px;
}

.tipinfotitle {
    height: 53px;
    line-height: 53px;
    font-size: 15px;
    color: #FF5219;
    border-bottom: 1px dashed #dcdcdc;
}

.tipinfocontent {
    padding: 10px 20px;
}
</style>